// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,
  Popconfirm,
  Upload,
  message,
  Button,
  Modal,
  Row,
  Col,
  Input,
  Divider,
  Tooltip,
  Icon,
  Tabs,
  Select,
  Spin } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config' 
import Cookie from 'js-cookie'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './integralExchange_cloudStyle.less' 
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'
const FormItem = Form.Item
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
}
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const routeView = function({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  // modelObj.xxx获取model中状态机的值
  let  {biz,regionList,projectList,modalObj,exchangeDetail} = modelObj

  function updateModal(item){
    modalObj.visible = !modalObj.visible;
    form.resetFields();
    if(item){
      exchangeDetail.id = item.id;
      exchangeDetail.regionid = item.regionid;
      exchangeDetail.projectid = item.projectid;
      exchangeDetail.accountName = item.accountName;
      exchangeDetail.accountPhone = item.accountPhone;
      exchangeDetail.ablishTime = item.ablishTime;
      exchangeDetail.zyx2 = item.zyx2;
      exchangeDetail.zyx3 = item.zyx3;
      exchangeDetail.isPost = item.isPost;
      exchangeDetail.giftName = item.giftName;
      exchangeDetail.status = item.status;
      exchangeDetail.productNum = item.productNum;
      exchangeDetail.integral = item.integral;
      exchangeDetail.address = item.address;
      exchangeDetail.daohTime = item.daohTime;
      exchangeDetail.caigTime = item.caigTime;
      exchangeDetail.createTime = item.createTime;
      exchangeDetail.lingqTime = item.lingqTime;
    }else{
      exchangeDetail = {};
    }
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { modalObj,exchangeDetail }
    })
  }

  //修改状态
  function updateStatus(value,item){
    dispatch({
      type: `${namespace}/updateStatus`,
      payload:{id:item.id}
    })
  }
  
  // 分页表格属性配置
  let pageProps = {
    // ---------- 界面部分 ----------
    'ui': {
      // 页面接口地址
      'api_url': 'admin/jfGift/exchangeGiftList',
      // 'api_url': 'admin/member/list',
      // 接口方式
      'method': 'POST',
      'app': '',
      // 接口参数
      'params': {uid:localStorage.getItem("username"),regionId:Cookie.get(config.cookie.regionId)},
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      'mockData': null,
      // 查询栏
      'search_bar': {
        'fields': [
          {
            en_name: 'id',
            zh_name: '订单号',
            elem_type: 'Input',
            elem_valid_type: 'string'
          },
          {
            en_name: 'accountName',
            zh_name: '会员姓名',
            elem_type: 'Input',
            elem_valid_type: 'string'
          },
          {
            en_name: 'mobile',
            zh_name: '会员电话',
            elem_type: 'Input',
            elem_valid_type: 'string'
          },
          {
            en_name: 'giftName',
            zh_name: '兑换商品名',
            elem_type: 'Input',
            elem_valid_type: 'string'
          },
          {
            en_name: 'status',
            zh_name: '兑换状态',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [
              {
                value: '0',
                label: '未领取'
              },
              {
                value: '1',
                label: '已领取'
              },
              {
                value: '2',
                label: '未领取'
              },
              // {
              //   value: '已领取',
              //   label: '已领取'
              // },
              // {
              //   value: '已结算',
              //   label: '已结算'
              // },
              // {
              //   value: '已取消',
              //   label: '已取消'
              // }
            ]
          },
          // {
          //   en_name: 'regionId',
          //   zh_name: '区域名称',
          //   elem_type: 'Select',
          //   elem_valid_type: 'string',
          //   cmpt_items: regionList
          // },
          {
            en_name: 'projectId',
            zh_name: '项目名称',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: projectList,
            onFocus:()=>{
              if(biz.queryForm && biz.queryForm.regionId)
              {
                dispatch({
                  type: `${namespace}/getProject`,
                  payload:{regionId:biz.queryForm.regionId,shelfStatus:1}
                })
              }
            }
          },
        ],
        searchHandler: (p) => { // 自定义搜索按钮回调函数，点击搜索时触发
          // let {projectId,provinceCode} = biz.queryForm
          // if(!projectId){
          //   delete biz.queryForm.projectId
          // }
          // if(provinceCode){
          //   delete biz.queryForm.provinceCode
          // }
          
        },
        resetHandler: (p) => { // 自定义重置按钮回调函数，点击重置时触发
          // console.log('reset click', p)
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          // console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table': {
        'status_params': '',
        'status_text': '全部',
        'scroll': { x: 2600 },
        // 表头字段列表"
        'fields': [
          {
            en_name: "key",
            zh_name: "序号",
            width: "60",
            render: (a, item, index, d, e, f) => {
              return index + 1
            },
          },
          {
            'en_name': 'id',
            'zh_name': '订单号',
            width: 100
          },
          {
            'en_name': 'accountName',
            'zh_name': '会员姓名',
            width: 150
          },
          {
            'en_name': 'accountPhone',
            'zh_name': '会员电话',
            width: 100
          },
          {
            'en_name': 'giftName',
            'zh_name': '兑换商品名',
            width: 350
          },
          {
            'en_name': 'productNum',
            'zh_name': '兑换数量',
            width: 100
          },
          {
            'en_name': 'integral',
            'zh_name': '兑换积分',
            width: 100
          },{
            'en_name': 'status',
            'zh_name': '兑换状态',
            width: 100,
            render: (text, record) => {
              return <div>
                {/* 0 兑换/ 1 核算/ 2 取消 */}
                {{ '0': '未领取', '1': '已领取' ,'2':'未领取'}[text] || ''}
              </div>
            }
          },
          {
            'en_name': 'isPost',
            'zh_name': '领取方式',
            width: 100,
            render: (text, record) => {
              return <div>
                {{ 'Y': '邮寄', 'N': '自取' }[text] || ''}
              </div>
            }
          },
          // {
          //   'en_name': 'regionname',
          //   'zh_name': '区域',
          //   width: 150,
          //   render: (a, item, index, d, e, f) => {
          //     if(!item.regionname || item.regionname == null || item.regionname == ""){
          //       if(regionList.length > 0){
          //         let data = regionList.filter(its=>{
          //           return its.regionId == item.regionid
          //         })
          //         if(data.length > 0){
          //           item.regionname = data[0].regionName;
          //         }
          //       }
          //     }
          //     return item.regionname
          //   }
          // },
          {
            'en_name': 'address',
            'zh_name': '领取地址',
            width: 350
          },
          {
            'en_name': 'createTime',
            'zh_name': '兑换时间',
            width: 150
          },
          // {
          //   'en_name': 'caigTime',
          //   'zh_name': '已确认时间',
          //   width:150
          // },
          // {
          //   'en_name': 'daohTime',
          //   'zh_name': '可领取时间',
          //   width: 150
          // },
          // {
          //   'en_name': 'lingqTime',
          //   'zh_name': '已领取时间',
          //   width: 150
          // },
          {
            'en_name': 'ablishTime',
            'zh_name': '取消时间',
            width: 150
          },
          {
            'en_name': 'projectName',
            'zh_name': '项目名称',
            width: 150
          },
          // {
          //   'en_name': 'zyx2',
          //   'zh_name': '取消申请',
          //   width: 100,
          //   render: (text, record) => {
          //     return <div>
          //       {{ 'Y': '是', 'N': '否' }[text] || ''}
          //     </div>
          //   }
          // },
          {
            en_name: "edit",
            zh_name: "操作",
            width: 150,
            fixed: 'right',
            render: (a, item, index, d, e, f) => {
              return (
                <span>
                  {/* 0 兑换 1 核算 2 取消 */}
                  <FlagBtn node={<a onClick={() => updateModal(item)}>查看<span className="ant-divider" style={{ display: 'inline-block' }} /></a>}> </FlagBtn>
                  {(item.status == "0") &&
                    <FlagBtn node={<a onClick={() => updateStatus('2',item)}>取消<span className="ant-divider" style={{ display: 'inline-block' }} /></a>}> </FlagBtn>
                  }
                  {/* {item.status == "已确认" &&
                    <FlagBtn node={<a onClick={() => updateStatus('klq',item)}>可领取<span className="ant-divider" style={{ display: 'inline-block' }} /></a>}> </FlagBtn>
                  }
                  {item.status == "可领取" &&
                    <FlagBtn node={<a onClick={() => updateStatus('ylq',item)}>已领取<span className="ant-divider" style={{ display: 'inline-block' }} /></a>}> </FlagBtn>
                  } */}
                  {/* {item.status == "已领取" &&
                    <FlagBtn node={<a onClick={() => updateStatus('yjs',item)}>已结算<span className="ant-divider" style={{ display: 'inline-block' }} /></a>}> </FlagBtn>
                  } */}
                  {/* {item.status != "已取消" &&(item.status == "确认中" || item.status == "已确认") &&
                    <FlagBtn node={<a onClick={() => updateStatus('yqx',item)}>已取消<span className="ant-divider" style={{ display: 'inline-block' }} /></a>}> </FlagBtn>
                  } */}
                  {/* <FlagBtn node={<a onClick={() => updateModal('edit', item)}>编辑<span className="ant-divider"  style={{ display: 'inline-block' }}/></a>} btnId={''}> </FlagBtn> */}
                  {/* <FlagBtn node={<a onClick={() => statisticsSkip('check',item)}>统计<span className="ant-divider"  style={{ display: 'inline-block' }}/></a>} btnId={''}> </FlagBtn>
                  <FlagBtn node={<Popconfirm Collapse title={`确定要删除吗？`} okText='确定' cancelText='取消' onConfirm={() => deleteSkip(item)}>
                      <a href='javascript:void(0)' onClick={(e) => {}}>删除
                          </a>
                 </Popconfirm>} btnId={''}> </FlagBtn> */}
                </span>
              )
            },
          }

        ],

        'actions': [
        ],
        "action_props": {
          fixed: "right",
          width: 210
        }
      },
      // 操作栏
      action_bar: [
        
        // {
        //   'func_name': 'add',
        //   'label': '导出',
        //   btnId: '',
        //   'type': 'primary',
        //   'onClick': (e) => {
        //     dispatch({
        //       type: `${namespace}/exportExcel`,
        //       payload: {  }
        //     })
        //   }
        // }
      ]
    },
  }

  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }


  return (
      <div className={cx('pageLayout')}>
        <ListPage pageProps={pageProps} />
        <Modal
        title='查看'
        width='900px'
        // className="pubBiz_CommonModel"
        visible={modalObj.visible}
        // visible='false'
        // onOk={() => {modalObj.type == 'edit'?addOrEditDetail():updateModal()}}
        onCancel={() => { updateModal() }}
        footer={[ 
          null,
          null
        ]}
      >
        <div className={styles.detailContainer}>
          <Form>
            <Row>
              {/* <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="所属区域">
                  {getFieldDecorator('regionid', {
                    initialValue: exchangeDetail.regionid ? exchangeDetail.regionid : '',
                  })(<Select
                    disabled={true}>
                  {regionList.map((item,idx)=>{
                      return <Select.Option key={item.key}  value={item.value}>{item.label}</Select.Option>
                    })}
                  
                </Select>)}
                </FormItem>
              </Col> */}
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="会员电话">
                  {getFieldDecorator('accountPhone', {
                    initialValue: exchangeDetail.accountPhone ? exchangeDetail.accountPhone+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="会员姓名">
                  {getFieldDecorator('accountName', {
                    initialValue: exchangeDetail.accountName ? exchangeDetail.accountName+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="兑换商品名">
                  {getFieldDecorator('giftName', {
                    initialValue: exchangeDetail.giftName ? exchangeDetail.giftName+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="兑换数量">
                  {getFieldDecorator('productNum', {
                    initialValue: exchangeDetail.productNum ? exchangeDetail.productNum+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="兑换积分">
                  {getFieldDecorator('integral', {
                    initialValue: exchangeDetail.integral ? exchangeDetail.integral+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="兑换状态">
                  {getFieldDecorator('status', {
                    initialValue: exchangeDetail.status ? exchangeDetail.status+'' : ''
                  })(<Input disabled={true}
                    />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="领取地址">
                  {getFieldDecorator('address', {
                    initialValue: exchangeDetail.address ? exchangeDetail.address+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="兑换时间">
                  {getFieldDecorator('createTime', {
                    initialValue: exchangeDetail.createTime ? exchangeDetail.createTime+'' : ''
                  })(<Input disabled={true}
                    />)}
                </FormItem>
              </Col>
              {/* <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="已确认时间">
                  {getFieldDecorator('caigTime', {
                    initialValue: exchangeDetail.caigTime ? exchangeDetail.caigTime+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col> */}
            </Row>
            <Row>
              {/* <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="可领取时间">
                  {getFieldDecorator('daohTime', {
                    initialValue: exchangeDetail.daohTime ? exchangeDetail.daohTime+'' : ''
                  })(<Input disabled={true}
                    />)}
                </FormItem>
              </Col> */}
              {/* <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="已领取时间">
                  {getFieldDecorator('lingqTime', {
                    initialValue: exchangeDetail.lingqTime ? exchangeDetail.lingqTime+'' : ''
                  })(<Input disabled={true}
                  />)}
                </FormItem>
              </Col> */}
            </Row>
            <Row>
              <Col span={12}>
                <FormItem
                  {...formItemLayout}
                  label="领取方式">
                  {getFieldDecorator('isPost', {
                    initialValue: exchangeDetail.isPost ? exchangeDetail.isPost+'' : ''
                  })(<Select
                    disabled={true}>
                      <Select.Option key='Y'  value='Y'>邮寄</Select.Option>
                      <Select.Option key='N'  value='N'>自取</Select.Option>
                </Select>)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
      </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))